<#import "/spring.ftl" as spring />
<#include "../lib/consts.ftl">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<link rel="shortcut icon" type="image/ico" href="" />
		
		<title>DataTables example</title>
		<style type="text/css" title="currentStyle">
			@import "${rctx}/em/c/demo_page.css";
			@import "${rctx}/em/c/demo_table.css";
			@import "${rctx}/em/c/style.css";
			@import "${rctx}/em/c/jquery.contextMenu.css";
			@import "${rctx}/em/c/jquery.ui.all.css";
		</style>
		<script type="text/javascript" language="javascript" src="${rctx}/em/j/jquery.js"></script>
		<script type="text/javascript" language="javascript" src="${rctx}/em/j/jquery.dataTables.js"></script>
		<script type="text/javascript" language="javascript" src="${rctx}/em/j/jquery.contextMenu.js" ></script>
		<script type="text/javascript" language="javascript" src="${rctx}/em/j/jquery.ui.core.js"></script>
		<script type="text/javascript" language="javascript" src="${rctx}/em/j/jquery.ui.widget.js"></script>
		<script type="text/javascript" language="javascript" src="${rctx}/em/j/jquery.ui.button.js"></script>
		<script type="text/javascript" language="javascript" src="${rctx}/em/j/jquery.ui.position.js"></script>
		<script type="text/javascript" language="javascript" src="${rctx}/em/j/jquery.ui.resizable.js"></script>
		<script type="text/javascript" language="javascript" src="${rctx}/em/j/jquery.ui.dialog.js"></script>
		
		
		<script type="text/javascript" charset="UTF-8">
		var oTable;
		var gaiSelected =  [];
		var selectId='';

			$(document).ready(function() {

				$("#dialog").dialog("destroy");
				
				oTable=$('#menucategorieslist').dataTable( {
					
					"bProcessing": true,
					"bServerSide": true,
					"bSort": false,
					"bJQueryUI": false,
					"sAjaxSource": '${ctx}/html/menucategories/data.json',
					"sPaginationType": "full_numbers",
					"fnRowCallback": function(nRow, aData, iDisplayIndex) {
						if ( jQuery.inArray(aData[0], gaiSelected) != -1 )
						{
							$(nRow).addClass('row_selected');
						}
						return nRow;
					},
					"aoColumns": [
						{ "bVisible": 0 }, /* ID column */
						null,
						null,
						null,
						null,
						null,
						null
					]
				} );

				$('#menucategorieslist tbody tr').live('mouseover', function () {
					
						if($(".contextMenu").is(":hidden")){
											
							var aData = oTable.fnGetData( this );
						
							selectId = aData[0];

							$(this).addClass('row_selected');
						}
					
				} );
			
				$('#menucategorieslist tbody tr').live('mouseout', function () {
					
					if($(".contextMenu").is(":hidden")){

						$(this).removeClass('row_selected');
					}
				
				} );

				$('#listContent').contextMenu({
					menu: 'myMenu'
				}, function(action, el, pos) {
					
					if(action=='new'){
						
						$( "form" )[ 0 ].reset();

						$("#ctipserror").html("");

						$("#id").attr("value","");
						
						$('#categoriesdialog').dialog('open');

						
						
					}else if(action=='edit'){
						
						$( "form" )[ 0 ].reset();
						
						$("#ctipserror").html("");
						
						$.ajax({
							type: "POST",
							url: "${ctx}/html/menucategories/"+selectId+"/edit.json",
							async: true,
							success: function(msg){

								if(msg.code==0){
									
									$("#id").attr("value",msg.entityBeans.id);

									$("#menuname").attr("value",msg.entityBeans.menuname);
									
									$("#egname").attr("value",msg.entityBeans.egname);

									$("#pinyin").attr("value",msg.entityBeans.pinyin);

									$("#discription").attr("value",msg.entityBeans.discription);

									$("#sort").attr("value",msg.entityBeans.sort);
									
									$("#userid").attr("value",msg.entityBeans.userid);

									$("#shopid").attr("value",msg.entityBeans.shopid);

									
									
								}else{
									
									$("#ctipserror").html("<font color='red'>错误号："+msg.code+"<br/>错误内容："+msg.info+"</font>");
									
								}

							}
							}); 

						$('#categoriesdialog').dialog('open');
						
					}else if(action=='delete'){
						
						$( "form" )[ 0 ].reset();

						$('#delipsmessage').html('是否删除？');

						$('#delips').dialog('open');
						
					}
					
				});

				
				$("#delips").dialog({
					autoOpen: false,
					height: 200,
					width: 300,
					modal: true,
					buttons: {
						'OK': function() {
					
					$.ajax({
						type: "POST",
						url: "${ctx}/html/menucategories/"+selectId+"/del.json",
						async: true,
						success: function(msg){

							if(msg.code==0){
								
								$("#ctipsmessage").html("<font color='red'>"+msg.info+"</font>");
								
							}else{
								
								$("#ctipsmessage").html("<font color='red'>错误号："+msg.code+"<br/>错误内容："+msg.info+"</font>");
								
							}

							$(this).dialog('close');
							
							$('#ctips').dialog('open');
							

						}
						}); 
												
					$(this).dialog('close');
						},
						close: function() {
							$(this).dialog('close');
						}
					}
				});
				
				$("#categoriesdialog").dialog({
					autoOpen: false,
					height: 400,
					width: 400,
					modal: true,
					buttons: {
						'OK': function() {
							formSubmit();
							
						},
						Cancel: function() {
							$(this).dialog('close');
						}
					},
					close: function() {
						
						
						
					}
				});

				$("#ctips").dialog({
					autoOpen: false,
					height: 200,
					width: 300,
					modal: true,
					buttons: {
						'OK': function() {
							
							window.location.reload();
						}
					},
					close: function() {
						$(this).dialog('close');
					}
				});
				function formSubmit(){

					$.ajax({
						type: "POST",
						url: "${ctx}/html/menucategories/create.json",
						data: $('#categoriestable').serialize(),
						async: true,
						success: function(msg){

							if(msg.code==0){
								
								$("#ctipsmessage").html(msg.info);

								$("#ctipserror").html(msg.info);
								
								$(this).dialog('close');
								
								$('#ctips').dialog('open');
								
							}else{
								
								$("#ctipserror").html("<font color='red'>错误号："+msg.code+"<br/>错误内容："+msg.info+"</font>");
								
							}

						}
						}); 

				}	

			} );
				
		</script>
		
		
	</head>
	<body >
		
<table cellpadding="0" cellspacing="0" border="0" class="display" id="menucategorieslist">
	<thead>
		<tr>
			<th width="0%">id</th>
			<th width="10%" align="center">MENUNAME</th>
			<th width="10%" align="center">EGNAME</th>
			<th width="10%" align="center">PINYIN</th>
			<th width="50%" align="center">DISCRIPTION</th>
			<th width="15%" align="center">CREATTIME</th>
			<th width="5%" align="center">SORT</th>
		</tr>
	</thead>
	
	<tbody id="listContent">
		<tr>
			<td colspan="7" align="center">Loading data from server</td>
		</tr>
	</tbody>
	
	<tfoot>

		<tr>
			<th width="0%">id</th>
			<th width="10%" align="center">MENUNAME</th>
			<th width="10%" align="center">EGNAME</th>
			<th width="10%" align="center">PINYIN</th>
			<th width="50%" align="center">DISCRIPTION</th>
			<th width="15%" align="center">CREATTIME</th>
			<th width="5%" align="center">SORT</th>
		</tr>
	</tfoot>
</table>
	
		<ul id="myMenu" class="contextMenu">
			<li class="paste"><a href="#new">new</a></li>
			<li class="edit"><a href="#edit">Edit</a></li>
			<li class="delete"><a href="#delete">Delete</a></li>
			<li class="quit separator"><a href="#quit">Quit</a></li>

		</ul>

<div id="categoriesdialog" title="MenuCategories">

	

	<form id="categoriestable" method="post">
	
		<table width="100%" >
		
			<input type="hidden" name="id" id="id"/>
			
			<tr>
				<td colspan="2" align="center"><div id="ctipserror"/></td>
			</tr>
			
			<tr>
				<td width="30%">菜品分类名称:</td>
				<td width="70%"><input type="text" name="menuname" id="menuname"  class="text ui-widget-content ui-corner-all" size="30"/></td>
			</tr>
			
			<tr>
				<td width="30%">英文名称:</td>
				<td width="70%"><input type="text" name="egname" id="egname" value="" class="text ui-widget-content ui-corner-all" size="30"/></td>
			</tr>
			
			<tr>
				<td width="30%">拼音:</td>
				<td width="70%"><input type="text" name="pinyin" value="" id="pinyin" class="text ui-widget-content ui-corner-all" size="30"/></td>
			</tr>
			
			<tr>
				<td width="30%">描述:</td>
				<td width="70%"><input type="text" name="discription" value="" id="discription" class="text ui-widget-content ui-corner-all" size="30"/></td>
			</tr>
			
			<tr>
				<td width="30%">排序:</td>
				<td width="70%"><input type="text" name="sort" value="" id="sort" maxlength="5" class="text ui-widget-content ui-corner-all" size="30"/></td>
			</tr>
			
			<tr>
				<td width="30%">创建者:</td>
				<td width="70%"><input type="text" disabled="disabled" name="userid" id="userid" value="" class="text ui-widget-content ui-corner-all" size="30"/></td>
			</tr>
			
			<tr>
				<td width="30%">商户:</td>
				<td width="70%"><input type="text" disabled="disabled" name="shopid" id="shopid" value="" class="text ui-widget-content ui-corner-all" size="30"/></td>
			</tr>
			
			
		</table>
	
	</form>
</div>

<div id="ctips" class="demo-description" align="center">

	<p class="validateTips" align="center"><div id="ctipsmessage"></div></p>

</div>

<div id="delips" class="demo-description" align="center">

	<p class="validateTips" align="center"><div id="delipsmessage"></div></p>

</div>
	</body>
	
</html>